<template>
	<div class="yh_content">
		<div class="tback">
			<el-button type="primary" class="bac6b7" @click="back">返回列表</el-button>
		</div>
		<div class="contents">
			<el-form :model="ruleForm" :rules="rules">
				<div style="display:flex" class="thead">
					<img class="touxiang" :src="avatar_img">
					<!--          <img class="touxiang" src="../../assets/member/card/userhead.png">-->
					<!--          <el-button type="primary" plain style="margin-left:20px" @click="chooseImage">本地上传</el-button>-->
					<el-upload style="margin-left:20px" action="#" :show-file-list="false"
						:http-request="handleAvatarSuccess" :before-upload="beforeAvatarUpload" class="">
						<div class="que bacFFF"
							style="border: 1px solid #C9C9C9;background: #6b7cdd;color:#fff;border: none">上传图片</div>
					</el-upload>
				</div>
				<div class="small_title">基本信息</div>
				<div class="forms">
					<div class="forms_line">
						<div class="left_title">所属场馆</div>
						<div style="font-size: 14px;">{{ venue?venue.name:'' }}</div>
					</div>
					<div class="forms_item">

						<el-form-item label="姓名" prop="name" class="dis disJuB wid100" style="margin: 0;">
							<el-input v-model="ruleForm.name" style="width: 140px;" placeholder="请填写姓名" />
						</el-form-item>
					</div>
					<div class="forms_item">
						<el-form-item label="性别" prop="sex" class="dis disJuB wid100" style="margin: 0;">
							<el-radio-group v-model="ruleForm.sex">
								<el-radio :label="1">男</el-radio>
								<el-radio :label="2">女</el-radio>
							</el-radio-group>
						</el-form-item>
						<!--          <div class="left_title"><span style="color:red;margin-right:2px">*</span>姓别</div>-->
						<!--          <div>-->
						<!--          </div>-->
					</div>
					<div class="forms_item">
						<el-form-item label="手机" prop="phone" class="dis disJuB wid100" style="margin: 0;">
							<el-input v-model="ruleForm.phone" style="width: 140px;" placeholder="请填写手机号码" />
						</el-form-item>
					</div>
					<div class="forms_item">
						<el-form-item label="登录密码" prop="pwd" class="dis disJuB wid100" style="margin: 0;">
							<el-input v-model="ruleForm.pwd" style="width: 140px;" placeholder="请填写登录密码" />
						</el-form-item>
					</div>
					<div class="forms_item">
						<el-form-item label="生日" prop="birthday" class="dis disJuB wid100" style="margin: 0;">
							<el-date-picker v-model="ruleForm.birthday" style="width: 140px; margin-left: 5px"
								size="small" type="date" placeholder="请选择" />
						</el-form-item>
					</div>
					<div class="forms_item" />
					<div class="forms_line">
						<el-form-item label="该店角色" class="dis disJuB wid100" style="margin: 0;">
							<el-checkbox-group v-model="ruleForm.checkList" size="medium" style="width: 560px;"
								@change="jusechoice">
								<el-checkbox v-for="(item, index) in roleList" :key="index"
									:label="item.id">{{ item.title }}</el-checkbox>
							</el-checkbox-group>
						</el-form-item>
					</div>
					<div v-if="ruleForm.checkList.indexOf(34) !== -1" class="forms_line" style="">
						<div class="item" style="width:100%;">
							<div class="color-warn" style="height: 32px;">（该员工是会籍顾问请选择）</div>
							<div class="clear">
								<el-form-item label="会籍顾问高级权限" prop="consultant" class="dis disJuB wid100"
									style="margin: 0;">
									<el-radio-group v-model="ruleForm.consultant">
										<el-radio :label="1">只可为所属会员约课</el-radio>
										<el-radio :label="2">可为全部会员约课</el-radio>
									</el-radio-group>
								</el-form-item>
							</div>
						</div>
					</div>

					<div v-if="jl_show" class="forms_line" style="">
						<div class="item" style="width:100%;">
							<div class="color-warn" style="height: 32px;">（该员工是老师请填写）</div>
							<div class="clear">
								<el-form-item label="老师类型" prop="teacherList" class="dis disJuB wid100"
									style="margin: 0;">
									<el-checkbox-group v-model="ruleForm.teacherList" size="medium"
										style="width: 560px;">
										<el-checkbox label="1">团课老师</el-checkbox>
										<el-checkbox label="2">私教课老师</el-checkbox>
									</el-checkbox-group>
								</el-form-item>
							</div>
							<div class="clear">
								<el-form-item label="老师简介" prop="teacherTextarea" class="dis disJuB wid100"
									style="margin: 0;">
									<el-input v-model="ruleForm.teacherTextarea" type="textarea" :rows="5"
										style="width: 650px; height: 112px;" />
								</el-form-item>
							</div>
						</div>
					</div>
					<div v-if="ruleForm.teacherList.indexOf('2') !== -1" class="">
						<div class="time-set-title">本周作息时间安排</div>
						<div class="rili_item" style="padding: 5px 15px;">
							<el-checkbox v-model="thisTimeChecked"
								style="padding-top: 8px;margin-bottom: 10px;">每个工作日作息时间都一样
								（私教作息时间涉及到会员预约私教可选的时间，建议认真设置。）</el-checkbox>
							<div>
								<table class="time-set-table" data-type="now">
									<tbody>
										<tr data-code="head">
											<td>
												<div class="hd-first" />
											</td>
											<td v-for="(item,index) in thisweek.header" :key="index">
												<div class="hd">
													<p class="title">
														{{ item.name }}
													</p>
													<p id="day_now_1" class="handle" data-type="now" :data-val="index">
														<span>上班</span>
														<el-switch v-model="item.work" active-color="#6b7cdd"
															inactive-color="#666666" />
													</p>
												</div>
											</td>
											<td class="col-handler" />
										</tr>

										<tr data-code="wt">
											<td>
												<div id="label_now_wt_1" class="row-normal">
													上班时间
												</div>
											</td>

											<td v-for="(item,index) in thisweek.playwork" :key="index">
												<div class="time-cell-default-box time-cell-box"
													@click="addtocart($event,'thisweekplaywork',index)">
													<span class="hour">{{ item.hour }}</span>
													<span class="minute">{{ item.min }}</span>
												</div>
											</td>
											<td class="col-handler" />
										</tr>
										<tr data-code="wt">
											<td>
												<div id="label_now_wt_2" class="row-normal">
													下班时间
												</div>
											</td>
											<td v-for="(item,index) in thisweek.overwork" :key="index">
												<div class="time-cell-default-box"
													@click="addtocart($event,'thisweekoverwork',index)">
													<span class="hour">{{ item.hour }}</span>
													<span class="minute">{{ item.min }}</span>
												</div>
											</td>
											<td class="col-handler" />
										</tr>
									</tbody>
									<tbody v-for="(item,index) in thisweek.content" :key="index">
										<tr data-code="dinner">
											<td rowspan="2">
												<div class="row-normal " @click="updname(item.modify,index,0)">
													{{ item.name }}
												</div>
											</td>
											<td v-for="(item2,index2) in item.playtime" :key="index2">
												<div class="time-cell-default-box"
													@click="addtocart($event,'thisweekcontentplaytime',index2,index)">
													<span class="hour">{{ item2.hour }}</span>
													<span class="minute">{{ item2.min }}</span>
												</div>
											</td>
											<td rowspan="2" class="col-handler">
												<span class="del-btn js-del" @click="delThisTime(index)"><img
														loading="lazy"
														src="../../../public/img/icon-del.svg?v=C8bv4rX0x"
														alt=""></span>
											</td>
										</tr>
										<tr>
											<td v-for="(item2,index2) in item.overtime" :key="index2">
												<div class="time-cell-default-box"
													@click="addtocart($event,'thisweekcontentovertime',index2,index)">
													<span class="hour">{{ item2.hour }}</span>
													<span class="minute">{{ item2.min }}</span>
												</div>
											</td>
										</tr>
									</tbody>
								</table>
								<div class="add-new-time">
									<span class="js-addRestRow" @click="addThisTime()">
										<img loading="lazy" src="../../../public/img/gree-add.svg?v=650443e" alt=""
											class="svg-add">新增其他休息</span>
								</div>
							</div>
						</div>
						<div class="time-set-title">下周作息时间安排</div>
						<div class="rili_item" style="padding: 5px 15px;">
							<el-checkbox v-model="nextTimeChecked"
								style="padding-top: 8px;margin-bottom: 10px;">每个工作日作息时间都一样
								（私教作息时间涉及到会员预约私教可选的时间，建议认真设置。）</el-checkbox>
							<div>
								<table class="time-set-table" data-type="now">
									<tbody>
										<tr data-code="head">
											<td>
												<div class="hd-first" />
											</td>
											<td v-for="(item,index) in nextweek.header" :key="index">
												<div class="hd">
													<p class="title">
														{{ item.name }}
													</p>
													<p id="day_now_1" class="handle" data-type="now" data-val="1">
														<span>上班</span>
														<el-switch v-model="item.work" active-color="#6b7cdd"
															inactive-color="#666666" />
													</p>
												</div>
											</td>
											<td class="col-handler" />
										</tr>
										<tr data-code="wt">
											<td>
												<div id="label_now_wt_1" class="row-normal">
													上班时间
												</div>
											</td>
											<td v-for="(item,index) in nextweek.playwork" :key="index">
												<div class="time-cell-default-box time-cell-box"
													@click="addtocart($event,'nextweekplaywork',index)">
													<span class="hour">{{ item.hour }}</span>
													<span class="minute">{{ item.min }}</span>
												</div>
											</td>
											<td class="col-handler" />
										</tr>
										<tr data-code="wt">
											<td>
												<div id="label_now_wt_2" class="row-normal">
													下班时间
												</div>
											</td>
											<td v-for="(item,index) in nextweek.overwork" :key="index">
												<div class="time-cell-default-box time-cell-box"
													@click="addtocart($event,'nextweekoverwork',index)">
													<span class="hour">{{ item.hour }}</span>
													<span class="minute">{{ item.min }}</span>
												</div>
											</td>
											<td class="col-handler" />
										</tr>
									</tbody>
									<tbody v-for="(item,index) in nextweek.content" :key="index">
										<tr data-code="dinner">
											<td rowspan="2">
												<div class="row-normal " @click="updname(item.modify,index,0)">
													{{ item.name }}
												</div>
											</td>
											<td v-for="(item2,index2) in item.playtime" :key="index2">
												<div class="time-cell-default-box time-cell-box"
													@click="addtocart($event,'nextweekcontentplaytime',index2,index)">
													<span class="hour">{{ item2.hour }}</span>
													<span class="minute">{{ item2.min }}</span>
												</div>
											</td>
											<td rowspan="2" class="col-handler">
												<span class="del-btn js-del" @click="delNextTime(index)"><img
														loading="lazy"
														src="../../../public/img/icon-del.svg?v=C8bv4rX0x"
														alt=""></span>
											</td>
										</tr>
										<tr>
											<td v-for="(item2,index2) in item.overtime" :key="index2">
												<div class="time-cell-default-box time-cell-box"
													@click="addtocart($event,'nextweekcontentovertime',index2,index)">
													<span class="hour">{{ item2.hour }}</span>
													<span class="minute">{{ item2.min }}</span>
												</div>
											</td>
										</tr>

									</tbody>
								</table>
								<div class="add-new-time">
									<span class="js-addRestRow" @click="addNextTime()"><img loading="lazy"
											src="../../../public/img/gree-add.svg?v=650443e" alt=""
											class="svg-add">新增其他休息</span>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div v-if="timeshow" class="time-sel-box"
					:style="'position: fixed;top: '+ timetop +'px; left: '+ timeleft +'px;'">
					<p class="time-sel-top"><span class="col-2">第一步选择小时</span><span class="col-2">第二步选择分钟 <em
								class="reset-time js-reset">清空</em></span></p>
					<div class="time-hour"><span v-for="(item,index) in xztime.hour" :key="index" class="cell"
							:class="index===xzhour?'curr':''" @click="clickxzhour(index)">{{ item.name }}</span></div>
					<div class="time-minute"><span v-for="(item,index) in xztime.min" :key="index" class="cell"
							:class="index===xzmin?'curr':''"
							@click="clickxzmin(index)">{{ xztime.hour[xzhour].time }}:{{ item.name }}</span></div>
					<div class="btn-group">
						<button type="button" class="space-mr25 btn-auto-34 js-sure" @click="updatetime(0)">确定</button>
						<button type="button" class="btn-disabled-auto-34 js-cancel" @click="updatetime(1)">取消</button>
					</div>
				</div>

			</el-form>
			<div class="dis disJuC" style="padding: 40px 0;">
				<el-button type="primary" class="bac6b7" @click="saveEmploy">保存员工</el-button>
				<el-button type="info" @click="back">取消</el-button>
			</div>
		</div>
		<el-dialog v-show="dialogVisible" title="图片剪裁" append-to-body @close="closeCropper">
			<div class="cropper-content">
				<div class="cropper" style="text-align:center">
					<vueCropper ref="cropper" :img="option.img" :output-size="option.size"
						:output-type="option.outputType" :info="true" :full="option.full" :can-move="option.canMove"
						:can-move-box="option.canMoveBox" :original="option.original" :auto-crop="option.autoCrop"
						:fixed="option.fixed" :fixed-number="option.fixedNumber" :center-box="option.centerBox"
						:info-true="option.infoTrue" :fixed-box="option.fixedBox" />
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="closeCropper">取 消</el-button>
				<el-button type="primary" :loading="loading" @click="finish">确认</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		uploadimg
	} from '@/api/utils'
	import {
		editbrandhead
	} from '@/api/brand'
	import {
		AddEdit,
		authgrouplist
	} from '@/api/staff'
	import Cookies from 'js-cookie'

	export default {
		name: 'EmployeeAdd',
		components: {},
		data() {
			return {
				switchValue: true,
				radio1: '1',
				list: null,
				total: 0,
				listLoading: false,
				search: {
					membership: []
				},
				ruleForm: {
					name: '',
					sex: 1,
					phone: '',
					birthday: '',
					role: '',
					teacherList: [],
					checkList: [],
					consultant: 1,
					teacherTextarea: '',
					pwd: ''
				},
				jl_show: false,
				gw_show: false,
				rules: {
					name: [{
							required: true,
							message: '请输入员工姓名1~20个字符',
							trigger: 'blur'
						},
						{
							min: 1,
							max: 20,
							message: '请输入员工姓名1~20个字符',
							trigger: 'blur'
						}
					],
					phone: [{
						required: true,
						message: '请输入手机号码',
						trigger: 'blur'
					}],
					sex: [{
						required: true,
						message: '请选择性别',
						trigger: 'blur'
					}],
					birthday: [{
						required: true,
						message: '请选择生日',
						trigger: 'blur'
					}],
					role: [{
						required: true,
						message: '请选择角色',
						trigger: 'blur'
					}],
					teacherList: [{
						required: true,
						message: '请选择老师类型',
						trigger: 'blur'
					}],
					teacherTextarea: [{
						required: true,
						message: '请输入老师简介',
						trigger: 'blur'
					}],
					pwd: [{
						required: true,
						message: '请输入登录密码',
						trigger: 'blur'
					}]
				},
				options: [],

				listQuery: {
					page: 1,
					limit: 20
				},
				// 图片裁剪
				dialogVisible: false,
				// 裁剪配置
				option: {
					img: 'https://img2.baidu.com/it/u=1579522417,3784157851&fm=253&fmt=auto&app=138&f=JPEG?w=732&h=500', // 裁剪图片的地址
					info: true, // 裁剪框的大小信息
					outputSize: 0.8, // 裁剪生成图片的质量
					outputType: 'jpeg', // 裁剪生成图片的格式
					canScale: true, // 图片是否允许滚轮缩放
					autoCrop: true, // 是否默认生成截图框
					autoCropWidth: 200, // 默认生成截图框宽度
					autoCropHeight: 200, // 默认生成截图框高度
					fixedBox: false, // 固定截图框大小不允许改变
					fixed: false, // 是否开启截图框宽高固定比例
					fixedNumber: [1, 1], // 截图框的宽高比例
					full: true, // 是否输出原图比例的截图
					canMoveBox: true, // 截图框能否拖动
					original: false, // 上传图片按照原始比例渲染
					centerBox: true, // 截图框是否被限制在图片里面
					infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
				},
				avatar_img: 'https://www.jianyigongxiang.com/public/membercard/userhead.png',
				// 防止重复提交
				loading: false,
				// 裁剪过后的图片
				imgUrl: '',
				thisTimeChecked: true,
				nextTimeChecked: true,
				thisweek: {
					header: [{
						name: '周一',
						work: true
					}, {
						name: '周二',
						work: true
					}, {
						name: '周三',
						work: true
					}, {
						name: '周四',
						work: true
					}, {
						name: '周五',
						work: true
					}, {
						name: '周六',
						work: true
					}, {
						name: '周日',
						work: true
					}],
					playwork: [{
						hour: '09',
						min: '00'
					}, {
						hour: '09',
						min: '00'
					}, {
						hour: '09',
						min: '00'
					}, {
						hour: '09',
						min: '00'
					}, {
						hour: '09',
						min: '00'
					}, {
						hour: '09',
						min: '00'
					}, {
						hour: '09',
						min: '00'
					}],
					overwork: [{
						hour: '09',
						min: '00'
					}, {
						hour: '09',
						min: '00'
					}, {
						hour: '09',
						min: '00'
					}, {
						hour: '09',
						min: '00'
					}, {
						hour: '09',
						min: '00'
					}, {
						hour: '09',
						min: '00'
					}, {
						hour: '09',
						min: '00'
					}],
					content: [{
							name: '午餐时间',
							modify: false,
							playtime: [{
								hour: '09',
								min: '00'
							}, {
								hour: '09',
								min: '00'
							}, {
								hour: '09',
								min: '00'
							}, {
								hour: '09',
								min: '00'
							}, {
								hour: '09',
								min: '00'
							}, {
								hour: '09',
								min: '00'
							}, {
								hour: '09',
								min: '00'
							}],
							overtime: [{
								hour: '09',
								min: '00'
							}, {
								hour: '09',
								min: '00'
							}, {
								hour: '09',
								min: '00'
							}, {
								hour: '09',
								min: '00'
							}, {
								hour: '09',
								min: '00'
							}, {
								hour: '09',
								min: '00'
							}, {
								hour: '09',
								min: '00'
							}]
						},
						{
							name: '晚餐时间',
							modify: false,
							playtime: [{
								hour: '09',
								min: '00'
							}, {
								hour: '09',
								min: '00'
							}, {
								hour: '09',
								min: '00'
							}, {
								hour: '09',
								min: '00'
							}, {
								hour: '09',
								min: '00'
							}, {
								hour: '09',
								min: '00'
							}, {
								hour: '09',
								min: '00'
							}],
							overtime: [{
								hour: '09',
								min: '00'
							}, {
								hour: '09',
								min: '00'
							}, {
								hour: '09',
								min: '00'
							}, {
								hour: '09',
								min: '00'
							}, {
								hour: '09',
								min: '00'
							}, {
								hour: '09',
								min: '00'
							}, {
								hour: '09',
								min: '00'
							}]
						}
					]
				},
				thiscontentnum: 1,
				nextcontentnum: 1,
				nextweek: {
					header: [{
						name: '周一',
						work: true
					}, {
						name: '周二',
						work: true
					}, {
						name: '周三',
						work: true
					}, {
						name: '周四',
						work: true
					}, {
						name: '周五',
						work: true
					}, {
						name: '周六',
						work: true
					}, {
						name: '周日',
						work: true
					}],
					playwork: [{
						hour: '09',
						min: '00'
					}, {
						hour: '09',
						min: '00'
					}, {
						hour: '09',
						min: '00'
					}, {
						hour: '09',
						min: '00'
					}, {
						hour: '09',
						min: '00'
					}, {
						hour: '09',
						min: '00'
					}, {
						hour: '09',
						min: '00'
					}],
					overwork: [{
						hour: '09',
						min: '00'
					}, {
						hour: '09',
						min: '00'
					}, {
						hour: '09',
						min: '00'
					}, {
						hour: '09',
						min: '00'
					}, {
						hour: '09',
						min: '00'
					}, {
						hour: '09',
						min: '00'
					}, {
						hour: '09',
						min: '00'
					}],
					content: [{
						name: '午餐时间',
						modify: false,
						playtime: [{
							hour: '09',
							min: '00'
						}, {
							hour: '09',
							min: '00'
						}, {
							hour: '09',
							min: '00'
						}, {
							hour: '09',
							min: '00'
						}, {
							hour: '09',
							min: '00'
						}, {
							hour: '09',
							min: '00'
						}, {
							hour: '09',
							min: '00'
						}],
						overtime: [{
							hour: '09',
							min: '00'
						}, {
							hour: '09',
							min: '00'
						}, {
							hour: '09',
							min: '00'
						}, {
							hour: '09',
							min: '00'
						}, {
							hour: '09',
							min: '00'
						}, {
							hour: '09',
							min: '00'
						}, {
							hour: '09',
							min: '00'
						}]
					}, {
						name: '晚餐时间',
						modify: false,
						playtime: [{
							hour: '09',
							min: '00'
						}, {
							hour: '09',
							min: '00'
						}, {
							hour: '09',
							min: '00'
						}, {
							hour: '09',
							min: '00'
						}, {
							hour: '09',
							min: '00'
						}, {
							hour: '09',
							min: '00'
						}, {
							hour: '09',
							min: '00'
						}],
						overtime: [{
							hour: '09',
							min: '00'
						}, {
							hour: '09',
							min: '00'
						}, {
							hour: '09',
							min: '00'
						}, {
							hour: '09',
							min: '00'
						}, {
							hour: '09',
							min: '00'
						}, {
							hour: '09',
							min: '00'
						}, {
							hour: '09',
							min: '00'
						}]
					}]
				},
				xztime: {
					hour: [{
							name: '00:00',
							time: '00'
						},
						{
							name: '01:00',
							time: '01'
						},
						{
							name: '02:00',
							time: '02'
						},
						{
							name: '03:00',
							time: '03'
						},
						{
							name: '04:00',
							time: '04'
						},
						{
							name: '05:00',
							time: '05'
						},
						{
							name: '06:00',
							time: '06'
						},
						{
							name: '07:00',
							time: '07'
						},
						{
							name: '08:00',
							time: '08'
						},
						{
							name: '09:00',
							time: '09'
						},
						{
							name: '10:00',
							time: '10'
						},
						{
							name: '11:00',
							time: '11'
						},
						{
							name: '12:00',
							time: '12'
						},
						{
							name: '13:00',
							time: '13'
						},
						{
							name: '14:00',
							time: '14'
						},
						{
							name: '15:00',
							time: '15'
						},
						{
							name: '16:00',
							time: '16'
						},
						{
							name: '17:00',
							time: '17'
						},
						{
							name: '18:00',
							time: '18'
						},
						{
							name: '19:00',
							time: '19'
						},
						{
							name: '20:00',
							time: '20'
						},
						{
							name: '21:00',
							time: '21'
						},
						{
							name: '22:00',
							time: '22'
						},
						{
							name: '23:00',
							time: '23'
						}
					],
					min: [{
							name: '00'
						},
						{
							name: '05'
						},
						{
							name: '10'
						},
						{
							name: '15'
						},
						{
							name: '20'
						},
						{
							name: '25'
						},
						{
							name: '30'
						},
						{
							name: '35'
						},
						{
							name: '40'
						},
						{
							name: '45'
						},
						{
							name: '50'
						},
						{
							name: '55'
						}
					]
				},
				xzhour: 0,
				xzmin: 0,
				timetop: 0,
				timeleft: 0,
				timeshow: false,
				updatetimename: '',
				updatetimeindex: 0,
				contentindex: 0,
				roleList: [],
				venue: ''

			}
		},
		created() {
			var venue = localStorage.getItem('venue')
			if (venue) {
				this.venue = JSON.parse(venue)
			}
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: [{
					name: '新增员工',
					url: '/member/editmember',
					pd: true
				}]
			})
			this.getgrouplist()
			// this.getList();
		},
		methods: {
			jusechoice(e) {
				var check = false
				for (var i = 0; i < e.length; i++) {
					for (var is = 0; is < this.roleList.length; is++) {
						if (e[i] == this.roleList[is]['id']) {
							if (this.roleList[is]['attrs'] == 1) {
								console.log('是老师，打开')
								check = true
							}
						}
					}
				}
				this.jl_show = check
			},
			getgrouplist() {
				authgrouplist().then(response => {
					const {
						data
					} = response
					this.roleList = data
				})
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
				const isLt2M = file.size / 1024 / 1024 < 2
				if (!isJPG) {
					this.$message.error('上传图片只能是 JPG或PNG 格式!')
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!')
				}
				return isJPG && isLt2M
			},

			handleAvatarSuccess(file) {
				const mf = new FormData()
				mf.append('file', file.file)
				uploadimg(mf).then(response => {
					const {
						data
					} = response
					console.log(data)
					const params = {
						logo: data
					}

					console.log(data)
					this.avatar_img = data
					// editbrandhead(params).then(response => {
					//   const {
					//     data
					//   } = response
					//   console.log(response)
					//   console.log(data)
					//   this.avatar_img = data
					// }).catch(error => {
					//   console.log(error)
					//   this.loading = false
					// })
				})
			},
			chooseImage() {
				this.dialogVisible = !this.dialogVisible
			},
			closeCropper() {
				this.dialogVisible = !this.dialogVisible
			},
			finish() {
				// 确认裁剪
			},
			back() {
				this.$router.go(-1)
			},
			addThisTime() {
				console.log(111)
				var that = this
				if (that.thisweek.content.length >= 7) {
					this.$message('可添加条目已达上限')
					return
				}
				const arr = {
					name: '其他休息' + that.thiscontentnum,
					modify: true,
					playtime: [{
						hour: '00',
						min: '00'
					}, {
						hour: '00',
						min: '00'
					}, {
						hour: '00',
						min: '00'
					}, {
						hour: '00',
						min: '00'
					}, {
						hour: '00',
						min: '00'
					}, {
						hour: '00',
						min: '00'
					}, {
						hour: '00',
						min: '00'
					}],
					overtime: [{
						hour: '00',
						min: '00'
					}, {
						hour: '00',
						min: '00'
					}, {
						hour: '00',
						min: '00'
					}, {
						hour: '00',
						min: '00'
					}, {
						hour: '00',
						min: '00'
					}, {
						hour: '00',
						min: '00'
					}, {
						hour: '00',
						min: '00'
					}]
				}
				that.thisweek.content.push(arr)
				that.thiscontentnum += 1
				console.log(that.thisweek.content)
			},
			delThisTime(index) {
				var that = this
				that.thisweek.content.splice(index, 1)
			},
			addNextTime() {
				console.log(111)
				var that = this
				const arr = {
					name: '其他休息' + that.nextcontentnum,
					modify: true,
					playtime: [{
						hour: '00',
						min: '00'
					}, {
						hour: '00',
						min: '00'
					}, {
						hour: '00',
						min: '00'
					}, {
						hour: '00',
						min: '00'
					}, {
						hour: '00',
						min: '00'
					}, {
						hour: '00',
						min: '00'
					}, {
						hour: '00',
						min: '00'
					}],
					overtime: [{
						hour: '00',
						min: '00'
					}, {
						hour: '00',
						min: '00'
					}, {
						hour: '00',
						min: '00'
					}, {
						hour: '00',
						min: '00'
					}, {
						hour: '00',
						min: '00'
					}, {
						hour: '00',
						min: '00'
					}, {
						hour: '00',
						min: '00'
					}]
				}
				that.nextweek.content.push(arr)
				that.nextcontentnum += 1
				console.log(that.nextweek.content)
			},
			delNextTime(index) {
				var that = this
				that.nextweek.content.splice(index, 1)
			},
			updname(modify, index, type) {
				if (!modify) {
					return
				}
				var that = this
				console.log(name)
				if (type === 0) { // 当前周
					this.$prompt('作息时间名称设置', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消'
					}).then(({
						value
					}) => {
						that.thisweek.content[index].name = value
						this.$message({
							type: 'success',
							message: '作息时间名称: ' + value
						})
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '取消输入'
						})
					})
				} else if (type === 1) { // 下周
					this.$prompt('作息时间名称设置', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消'
					}).then(({
						value
					}) => {
						that.nextweek.content[index].name = value
						this.$message({
							type: 'success',
							message: '作息时间名称: ' + value
						})
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '取消输入'
						})
					})
				}
			},
			clickxzhour(index) {
				this.xzhour = index
			},
			clickxzmin(index) {
				this.xzmin = index
			},
			addtocart(e, name, index, index2 = 0) {
				const rect = e.target.getBoundingClientRect() // 获取点击的dom的位置
				this.timetop = rect.top + 52
				this.timeleft = rect.left
				this.timeshow = true
				this.updatetimename = name
				this.updatetimeindex = index
				this.contentindex = index2
			},
			updatetime(type) {
				let i
				var that = this
				if (type === 1) { // 取消
					that.timeshow = false
				} else {
					// that.xzhour;
					// that.xzmin;
					if (that.updatetimename === 'thisweekplaywork') {
						if (that.thisTimeChecked) {
							for (i = 0; i < 7; i++) {
								that.thisweek.playwork[i].hour = that.xztime.hour[that.xzhour].time
								that.thisweek.playwork[i].min = that.xztime.min[that.xzmin].name
							}
						} else {
							that.thisweek.playwork[that.updatetimeindex].hour = that.xztime.hour[that.xzhour].time
							that.thisweek.playwork[that.updatetimeindex].min = that.xztime.min[that.xzmin].name
						}
					}
					if (that.updatetimename === 'thisweekoverwork') {
						if (that.thisTimeChecked) {
							for (i = 0; i < 7; i++) {
								that.thisweek.overwork[i].hour = that.xztime.hour[that.xzhour].time
								that.thisweek.overwork[i].min = that.xztime.min[that.xzmin].name
							}
						} else {
							that.thisweek.overwork[that.updatetimeindex].hour = that.xztime.hour[that.xzhour].time
							that.thisweek.overwork[that.updatetimeindex].min = that.xztime.min[that.xzmin].name
						}
					}
					if (that.updatetimename === 'thisweekcontentplaytime') {
						if (that.thisTimeChecked) {
							for (i = 0; i < 7; i++) {
								that.thisweek.content[that.contentindex].playtime[i].hour = that.xztime.hour[that.xzhour]
									.time
								that.thisweek.content[that.contentindex].playtime[i].min = that.xztime.min[that.xzmin].name
							}
						} else {
							that.thisweek.content[that.contentindex].playtime[that.updatetimeindex].hour = that.xztime
								.hour[that.xzhour].time
							that.thisweek.content[that.contentindex].playtime[that.updatetimeindex].min = that.xztime.min[
								that.xzmin].name
						}
					}
					if (that.updatetimename === 'thisweekcontentovertime') {
						if (that.thisTimeChecked) {
							for (i = 0; i < 7; i++) {
								that.thisweek.content[that.contentindex].overtime[i].hour = that.xztime.hour[that.xzhour]
									.time
								that.thisweek.content[that.contentindex].overtime[i].min = that.xztime.min[that.xzmin].name
							}
						} else {
							that.thisweek.content[that.contentindex].overtime[that.updatetimeindex].hour = that.xztime
								.hour[that.xzhour].time
							that.thisweek.content[that.contentindex].overtime[that.updatetimeindex].min = that.xztime.min[
								that.xzmin].name
						}
					}
					if (that.updatetimename === 'nextweekplaywork') {
						if (that.nextTimeChecked) {
							for (i = 0; i < 7; i++) {
								that.nextweek.playwork[i].hour = that.xztime.hour[that.xzhour].time
								that.nextweek.playwork[i].min = that.xztime.min[that.xzmin].name
							}
						} else {
							that.nextweek.playwork[that.updatetimeindex].hour = that.xztime.hour[that.xzhour].time
							that.nextweek.playwork[that.updatetimeindex].min = that.xztime.min[that.xzmin].name
						}
					}
					if (that.updatetimename === 'nextweekoverwork') {
						if (that.nextTimeChecked) {
							for (i = 0; i < 7; i++) {
								that.nextweek.overwork[i].hour = that.xztime.hour[that.xzhour].time
								that.nextweek.overwork[i].min = that.xztime.min[that.xzmin].name
							}
						} else {
							that.nextweek.overwork[that.updatetimeindex].hour = that.xztime.hour[that.xzhour].time
							that.nextweek.overwork[that.updatetimeindex].min = that.xztime.min[that.xzmin].name
						}
					}
					if (that.updatetimename === 'nextweekcontentplaytime') {
						if (that.nextTimeChecked) {
							for (i = 0; i < 7; i++) {
								that.nextweek.content[that.contentindex].playtime[i].hour = that.xztime.hour[that.xzhour]
									.time
								that.nextweek.content[that.contentindex].playtime[i].min = that.xztime.min[that.xzmin].name
							}
						} else {
							that.nextweek.content[that.contentindex].playtime[that.updatetimeindex].hour = that.xztime
								.hour[that.xzhour].time
							that.nextweek.content[that.contentindex].playtime[that.updatetimeindex].min = that.xztime.min[
								that.xzmin].name
						}
					}
					if (that.updatetimename === 'nextweekcontentovertime') {
						if (that.nextTimeChecked) {
							for (i = 0; i < 7; i++) {
								that.nextweek.content[that.contentindex].overtime[i].hour = that.xztime.hour[that.xzhour]
									.time
								that.nextweek.content[that.contentindex].overtime[i].min = that.xztime.min[that.xzmin].name
							}
						} else {
							that.nextweek.content[that.contentindex].overtime[that.updatetimeindex].hour = that.xztime
								.hour[that.xzhour].time
							that.nextweek.content[that.contentindex].overtime[that.updatetimeindex].min = that.xztime.min[
								that.xzmin].name
						}
					}
					that.timeshow = false
				}
			},
			saveEmploy() {
				var that = this
				var date = {}
				date['group_id'] = this.ruleForm.checkList.join(',')
				date['cover_img'] = this.avatar_img
				date['name'] = this.ruleForm.name
				date['gender'] = this.ruleForm.sex
				date['mobile'] = this.ruleForm.phone
				date['pwd'] = this.ruleForm.pwd
				date['birthday'] = this.ruleForm.birthday
				date['schedule_auth'] = this.ruleForm.consultant
				date['trainers_auth'] = this.ruleForm.teacherList.join(',')
				date['on_job'] = 1
				var week = {}
				week['thisweek'] = this.thisweek
				week['nextweek'] = this.nextweek
				date['rest_time'] = JSON.stringify(week)
				date['introduce'] = this.ruleForm.teacherTextarea
				console.log(date)
				// return;
				AddEdit(date).then(response => {
					const {
						data
					} = response
					if (response.code == 0) {
						this.$router.go(-1)
					}
				}).catch(error => {
					console.log(error)
					this.loading = false
				})
			}

		}
	}
</script>

<style scoped>
	.yh_content {
		padding: 20px;
		font-size: 14px;
	}

	/deep/.el-textarea__inner {
		height: 100%;
	}

	.contents {
		width: 840px;
		/* border: 1px solid red; */
		margin: 0px auto;
		padding: 10px
	}

	.yh_topsearch {
		border: 1px solid #ccc;
		padding: 20rpx;

	}

	.yh_dis {
		display: flex;
	}

	.yh_disAlc {
		align-items: center;
	}

	.touxiang {
		width: 70px;
		height: 70px;
		border-radius: 10px;
	}

	.thead {
		display: flex;
		align-items: center;
	}

	.small_title {
		font-size: 13px;
		color: #7c7c7c;
		margin-top: 20px;
		margin-bottom: 10px;
	}

	.forms {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.forms_line {
		width: 100%;
		min-height: 42px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		background: #ededed;
		padding: 5px 15px;
		margin-bottom: 10px;
		font-size: 14px;
	}

	.forms_item {
		width: 49.5%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #ededed;
		padding: 5px 5px 5px 10px;
		margin-bottom: 10px
	}

	.left_title {
		letter-spacing: 2px;
		font-size: 14px
	}

	.buttom_btns {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 50%;
		margin: 0px auto;
		margin-top: 50px;
		margin-bottom: 50px
	}

	.save {
		margin-right: 30px
	}

	.tback {
		display: flex;
		justify-content: right;
		width: 90%;
		margin: 0px auto;
	}

	.forms_line .item {
		padding: 5px 15px;
	}

	.color-warn {
		color: #ff1f1f;
	}

	.clear {
		zoom: 1;
	}

	.fl {
		float: left;
	}

	.w-560 {
		width: 560px;
	}

	.el-form-item::before,
	.el-form-item::after {
		display: table;
		content: none;
	}

	.time-set-title {
		height: 32px;
		line-height: 32px;
		font-size: 12px;
		color: #787878;
		background: #ffffff;
	}

	.rili_item {
		width: 840px;
		min-height: 300px;
		background: #ededed;
	}

	.time-set-table {
		width: 100%;
		text-align: center;
		background: #ffffff;
	}

	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

	.time-set-table td {
		border: 1px solid #d9d9d9;
		table-layout: fixed;
	}

	.time-set-table .row-normal {
		margin: 0 15px;
		width: 40px;
		line-height: 1.2;
		word-wrap: break-word;
	}

	.time-set-table .time-cell-default-box {
		padding: 6px 0;
		height: 52px;
		background: #f6f6f6;
		cursor: pointer;
	}

	.time-set-table .time-cell-default-box span {
		position: relative;
		float: left;
		height: 40px;
		line-height: 40px;
		width: 49px;
	}

	.time-cell-default-box .hour::after {
		content: "：";
		position: absolute;
		right: -5px;
	}

	.time-set-table .col-handler {
		width: 28px;
		background: #ededed;
		border: 1px solid #ededed;
		border-left: 0;
		text-align: right;
	}

	.add-new-time {
		padding: 10px 0 5px;
		height: 40px;
		line-height: 20px;
		color: #6b7cdd;
	}

	.add-new-time span {
		display: inline-block;
		cursor: pointer;
	}

	.add-new-time .svg-add {
		display: inline-block;
		width: 17px;
		height: 17px;
		margin-right: 5px;
		vertical-align: sub;
	}

	/deep/.el-checkbox__inner {
		width: 16px;
		height: 16px;
	}

	/deep/.el-checkbox__input.is-checked+.el-checkbox__label {
		color: #6b7cdd;
	}

	/deep/.el-checkbox__input.is-checked .el-checkbox__inner,
	.el-checkbox__input.is-indeterminate .el-checkbox__inner {
		border-color: #6b7cdd !important;
		background-color: #6b7cdd !important;
	}

	/deep/.el-checkbox__input.is-checked+.el-checkbox__label {
		color: #6b7cdd !important;
	}

	/deep/.el-checkbox__inner:hover {
		border-color: #6b7cdd !important;
	}

	/deep/.el-checkbox__input.is-focus .el-checkbox__inner {
		border-color: #6b7cdd !important;
	}

	/deep/.el-radio__input.is-checked+.el-radio__label {
		color: #6b7cdd !important;
	}

	/deep/.el-radio__input.is-checked .el-radio__inner {
		background: #6b7cdd !important;
		border-color: #6b7cdd !important;
	}

	.handle {
		height: 30px;
		line-height: 30px;
		cursor: pointer;
	}

	.handle span {
		margin-right: 5px;
	}

	/* 选择时间框 */
	.time-sel-box {
		position: absolute;
		width: 520px;
		height: 200px;
		z-index: 1250;
	}

	.time-sel-box .time-sel-top {
		text-align: center;
		height: 26px;
		line-height: 26px;
		font-size: 12px;

		display: flex;
		justify-content: space-between;
		margin: 0;
	}

	.time-sel-box .time-hour {
		float: left;
		width: 255px;
		height: 163px;
		padding: 10px 0 0 10px;
		border: 1px solid #d9d9d9;
		background: #ffffff;
		overflow: hidden;
	}

	.time-sel-box .time-minute {
		position: absolute;
		width: 255px;
		height: 96px;
		padding: 10px 0 0 10px;
		right: 0;
		top: 26px;
		background: #ffffff;
		border: 1px solid #d9d9d9;
		border-bottom: 0;
		overflow: hidden;
	}

	.time-sel-box .btn-group {
		position: absolute;
		width: 255px;
		height: 69px;
		right: 0;
		top: 120px;
		padding-top: 15px;
		text-align: center;
		border: 1px solid #d9d9d9;
		border-top: 0;
		background: #ffffff;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.time-sel-box .time-sel-top span {
		position: relative;
		float: left;
		width: 255px;
		background: #d9d9d9;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
	}

	.col-2 {
		width: 50%;
		display: inline-block;
		box-sizing: border-box;
	}

	.time-sel-box .reset-time {
		position: absolute;
		right: 10px;
		font-size: 12px;
		font-style: normal;
		color: #6b7cdd;
		cursor: pointer;
	}

	.time-sel-box .cell {
		float: left;
		width: 50px;
		height: 24px;
		margin-bottom: 2px;
		margin-right: 10px;
		line-height: 24px;
		text-align: center;
		cursor: pointer;
	}

	.time-sel-box .cell.curr {
		background: #6b7cdd;
		color: #ffffff;
	}

	.time-sel-box .cell {
		float: left;
		width: 50px;
		height: 24px;
		margin-bottom: 2px;
		margin-right: 10px;
		line-height: 24px;
		text-align: center;
		cursor: pointer;
	}

	.space-mr25 {
		margin-right: 25px;
	}

	.btn-disabled-auto-34 {
		display: inline-block;
		padding: 0 24px;
		height: 34px;
		line-height: 34px;
		text-align: center;
		color: #ffffff;
		background: #616b74;
		border-radius: 6px;
		vertical-align: top;
	}

	.btn-auto-34 {
		display: inline-block;
		padding: 0 24px;
		height: 34px;
		line-height: 34px;
		text-align: center;
		color: #ffffff;
		background: #6b7cdd;
		border-radius: 6px;
		vertical-align: top;
	}

	button {
		border: 0;
	}

	/* 选择时间框 */
</style>